<template>
  <div style="position: relative;height: 100%;width: 100%">

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render
               style="width: 90%; height: 190px; margin: 0 auto">
      <van-swipe-item v-for="image in Images" :key="image">
        <img :src="image" style="width: 100%; height: 150px; border-radius: 20px; margin-top: 20px"/>
      </van-swipe-item>
    </van-swipe>

    <van-cell center title="心动模式">
      <template #right-icon>
        <van-switch v-model="isMatchMode" size="24" />
      </template>
    </van-cell>

<!--    <div style="margin: 0 auto;">-->
<!--      <user-card-list :user-list="userList" :loading="loading"/>-->
<!--    </div>-->
<!--    <van-empty v-if="!userList || userList.length < 1" description="数据为空"/>-->
    <van-tabs v-model:active="active">
      <van-tab title="心动伙伴">
        <van-pull-refresh
            v-model="refreshLoading"
            success-text="刷新成功"
            @refresh="onRefresh">
          <van-search v-model="userSearch" placeholder="请输入姓名关键词" shape="round" @search="searchUser"/>

          <van-list
              v-model:loading="listLoading"
              :finished="listFinished"
              offset="0"
              @load="onLoad"
              style="margin: 15px"
          >
            <template #finished>
              <span v-if="!searching">
                <van-empty :image-size="[60, 60]" image="search" description="🌏没有匹配的伙伴？可以搜索伙伴"/>
              </span>
            </template>
            <UserCardList :user-list="userList"/>
          </van-list>

          <van-back-top right="20px" bottom="60px"/>
          <van-empty v-if="(!userList ||　userList.length===0) && !listLoading && !searching"
                     description="暂无用户"/>
        </van-pull-refresh>
      </van-tab>

      <van-tab title="博文热榜">
        <van-pull-refresh
            v-model="refreshLoading"
            success-text="刷新成功"
            @refresh="blogRefresh">
          <van-search v-model="blogSearch" placeholder="请输入搜索关键词" shape="round" @search="searchBlog"/>
          <van-list
              v-model:loading="listLoading"
              :finished="blogListFinished"
              offset="0"
              @load="blogLoad"
              style="margin: 15px"
          >
            <template #finished>
              <van-empty image="search" v-if="!searching">🌈没有更多博文了</van-empty>
            </template>
            <blog-card-list :blog-list="blogList"/>
          </van-list>
          <van-back-top right="20px" bottom="60px"/>
          <van-empty v-if="(!blogList ||　blogList.length===0) && !listLoading &&!searching" image="search"
                     description="暂无博文"/>
        </van-pull-refresh>
      </van-tab>
      <van-loading vertical v-if="searching">
        <template #icon>
          <van-icon name="star-o" size="30"/>
        </template>
        加载中...
      </van-loading>
    </van-tabs>
  </div>

</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import UserCardList from "../components/UserCardList.vue";
import {UserType} from "../models/user";
import Images from "../constants/teamImg.ts";

const isMatchMode = ref<boolean>(false);
const searching = ref(false)
const active = ref(0)
const userList = ref([]);
const refreshLoading = ref(false)
const loading = ref(true);
const currentPage = ref(0)
const listLoading = ref(false)
const blogList = ref([])
const blogListFinished = ref(false)
const blogCurrentPage = ref(0)
const listFinished = ref(false)
const userSearch = ref("")
const blogSearch = ref("")
const toast = Toast.loading({
  message: '伙伴正在赶来',
  forbidClick: true,
  loadingType: 'spinner',
});

/**
 * 刷新页面
 */
const onRefresh = async () => {
  currentPage.value = 1
  userList.value = []
  listFinished.value = false
  await getUserList(currentPage.value)
  refreshLoading.value = false
  listLoading.value = false;
}

/**
 * 刷新博客
 */
const blogRefresh = async () => {
  blogCurrentPage.value = 1
  blogList.value = []
  blogListFinished.value = false
  await getBlogList(blogCurrentPage.value)
  refreshLoading.value = false
  listLoading.value = false
}

/**
 * 获取博客信息列表
 * @param currentPage
 */
const getBlogList = async (currentPage) => {
  let res = await myAxios.get("/blog/list", {
    params: {
      currentPage: currentPage,
      title: blogSearch.value
    }
  });
  if (res?.code === 0) {
    if (res.data.records.length > 0) {
      res.data.records.forEach(item => blogList.value.push(item))
    } else {
      blogListFinished.value = true
    }
    listLoading.value = false
  }
}

/**
 * 搜索博客
 */
const searchBlog = async () => {
  searching.value = true
  blogList.value = []
  blogCurrentPage.value = 1
  await getBlogList(blogCurrentPage.value)
  searching.value = false
}

/**
 * 加载博客
 */
const blogLoad = async () => {
  blogCurrentPage.value++
  await getBlogList(blogCurrentPage.value)
}

/**
 * 搜索匹配的用户
 */
const searchUser = async () => {
  searching.value = true
  userList.value = []
  currentPage.value = 1
  await getUserList(currentPage.value)
  searching.value = false
}

/**
 * 加载用户
 */
const onLoad = async () => {
  currentPage.value++
  await getUserList(currentPage.value)
  listLoading.value = false;
}

/**
 * 加载数据 me
 */
// const loadData = async (currentPage) => {
//   let userListData;
//   loading.value = true;
//   // 心动模式，根据标签匹配用户
//   if (isMatchMode.value) {
//     const num = 10;
//     userListData = await myAxios.get('/user/match', {
//       params: {
//         currentPage: currentPage,
//         username: userSearch.value,
//       },
//     })
//         .then(function (response) {
//           console.log('/user/match succeed', response);
//           Toast({
//             message: '心动模式...',
//             icon: 'like-o',
//           });
//           listFinished.value = true
//           return response?.data;
//         })
//         .catch(function (error) {
//           console.error('/user/match error', error);
//           Toast.fail('心动失败');
//         })
//   } else {
//     // 普通模式，直接分页查询用户
//     userListData = await myAxios.get('/user/recommend', {
//       params: {
//         pageSize: 8,
//         pageNum: 1,
//       },
//     })
//         .then(function (response) {
//           console.log('/user/recommend succeed', response);
//           listFinished.value = true
//           return response?.data?.records;
//         })
//         .catch(function (error) {
//           console.error('/user/recommend error', error);
//           Toast.fail('请求失败');
//         })
//   }
//   if (userListData) {
//     userListData.forEach((user: UserType) => {
//       if (user.tags) {
//         user.tags = JSON.parse(user.tags);
//       }
//     })
//     userList.value = userListData;
//   }
//   loading.value = false;
// }

/**
 * 获取用户信息列表
 * @param currentPage
 */
async function getUserList(currentPage) {
  const userListData = await myAxios.get("/user/match", {
    params: {
      currentPage: currentPage,
      username: userSearch.value
    }
  })
  if (userListData?.code === 0) {
  } else {
    Toast.fail("加载失败")
  }
  if (userListData.data?.records.length === 0) {
    listFinished.value = true
    return
  }
  if (userListData?.data.records) {
    userListData.data.records.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags)
      }
    })
    for (let i = 0; i < userListData.data.records.length; i++) {
      userList.value.push(userListData.data.records[i])
    }
  }
}

// watchEffect(() => {
//   loadData();
// })

</script>

<style scoped>

</style>
